<script lang='ts' setup>
import { LoginType } from '@/models/@types';
import { userService } from '@/services/user.service';
import { Message } from "@arco-design/web-vue";
import { ref } from 'vue';

const emits = defineEmits(['close', 'change'])

const phone = ref("");
const password = ref("");

function login(): void {
  if (!phone.value) Message.error("请先输入手机号码")
  else if (!password.value) Message.error("请先输入密码")
  else
    userService.login(LoginType.Password, password.value, phone.value).then(() => emits('close'));
}
</script>
<template>
  <div class="login">
    <div class="title flex"><span class="text flex">手机密码登录</span></div>
    <div class="cell tips flex">
      <a-link theme="primary" @click="emits('change', 'register')"> 如果第一次登录，请先注册账号 </a-link>
    </div>
    <div class="cell flex">
      <a-dropdown>
        <a-button style="height: 50px;min-width: 80px;"> + 86
          <template #suffix> <t-icon name="chevron-down" size="16" /></template>
        </a-button>
        <template #content>
          <a-doption>+ 86</a-doption>
        </template>
      </a-dropdown>
      <input type="text" placeholder="请输入手机号码" v-model="phone">
    </div>
    <div class="cell flex">
      <!-- <t-input type="password" placeholder="请输入密码" v-model="password" /> -->
      <input type="password" placeholder="请输入密码" v-model="password">
    </div>
    <div class="cell tips flex">
      <a-link theme="primary" @click="emits('change', 'login-phone')"> 手机验证码登录 </a-link>
      <a-link @click="emits('change', 'reset')"> 忘记密码 </a-link>
    </div>
    <button class="cell btn" @click="login">登录</button>
  </div>
</template>
<style lang='scss' scoped>
.login {
  width: 100%;
  background: var(--color-bg-1);
  padding: 0 50px;
  justify-content: space-between;
}

.title {
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 45px;
  justify-content: center;

  .text {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-neutral-10);
    line-height: 33px;
    letter-spacing: 2px;
  }

  .close {
    cursor: pointer;
    font-weight: 600;
    font-size: 25px;
  }
}


.cell {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-neutral-4);
  margin-bottom: 20px;
  overflow: hidden;
  justify-content: space-between;

  .select {
    width: 88px;
    height: 100%;
    font-size: 16px;

    font-weight: 500;
    color: var(--color-neutral-10);
    line-height: 22px;
    letter-spacing: 2px;
    text-align: center;
  }

  input {
    height: 100%;
    flex: 1;
    padding: 15px 20px;
    color: var(--color-neutral-10);
  }

  .get-btn {
    padding: 15px 20px;
    height: 50px;
    width: 100%;
  }
}

.tips {
  border: none;
  border-radius: 0;
  font-size: 16px;

  font-weight: 600;
  color: rgb(var(--arcoblue-6));
  line-height: 22px;
  letter-spacing: 1px;
}

.btn {
  background: rgb(var(--arcoblue-6));
  border-radius: 10px;
  border-color: var(--color-bg-1);
  color: #fff;
  height: 52px;
  cursor: pointer;
  margin-bottom: 0;
  margin-top: 25px;
}
</style> 